<template>
  <div>
    <div>
      <div class="my-flex">
        <el-input
          placeholder="根据标题搜索"
          clearable
          style="width: 15%; margin-right: 1%"
          v-model="evaluation.title"
        >
        </el-input>
        <el-select
          v-model="evaluation.type"
          placeholder="类型"
          style="margin-right: 1%"
        >
          <el-option
            v-for="item in Type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-button
          icon="el-icon-search"
          circle
          @click="refreshPage()"
        ></el-button>
        <el-button
          icon="el-icon-delete"
          circle
          @click="evaluation = {}"
        ></el-button>
      </div>
      <div class="my-flex">
        <el-table :data="List" style="width: 100%">
          <el-table-column type="index" width="50" label="序号">
            <template slot-scope="scope">
              {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="300">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="180">
            <template slot-scope="scope">
              {{ typeName(scope.row.type) }}
            </template>
          </el-table-column>

          <el-table-column prop="avatar" label="封面" width="300">
            <template slot-scope="scope">
              <el-image
                style="width: 100x; height: 100px"
                :src="scope.row.cover"
                fit="fill"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="createdate" label="时间" width="250">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="my-flex">
                <el-button
                  type="warning"
                  style="margin-right: 10px"
                  @click="openDialog(scope.row)"
                  >修改</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除该问题？"
                  @confirm="deleteConsultApplyById(scope.row)"
                >
                  <el-button slot="reference" type="danger">删除</el-button>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="my-flex">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="修改心理评测" :visible.sync="dialogVisible" width="40%">
      <el-form label-position="left" label-width="100px" :model="row">
        <el-form-item label="标题">
          <el-input v-model="row.title"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="row.brief" type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="row.type">
            <el-radio :label="1">情感</el-radio>
            <el-radio :label="2">性格</el-radio>
            <el-radio :label="3">健康</el-radio>
            <el-radio :label="4">职场</el-radio>
            <el-radio :label="5">人际</el-radio>
            <el-radio :label="6">能力</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="封面">
          <el-image
            style="width: 500px; height: 300px"
            :src="row.cover"
            fit="fill"
          ></el-image>
        </el-form-item>

        <el-form-item label="操作">
          <div class="my-flex">
            <el-button type="primary" @click="submit(row)">确定</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import { components as Viewer } from "v-viewer";
export default {
  components: {
    // Viewer,
  },
  created() {
    this.refreshPage();
  },
  computed: {
    //查询参数
    param() {
      let param = this.evaluation;
      param.pageIndex = this.pageIndex;
      param.pageSize = this.pageSize;
      return param;
    },
  },
  data() {
    return {
      dialogVisible: false,
      List: [], //申请列表
      row: {}, //选中的行
      article: {}, //心理文章查询对象
      evaluation: {},
      pageIndex: 1, //页数
      pageSize: 5, //页大小
      total: 0, //总条数

      resultOption2: [
        { label: "同意申请", value: 1 },
        { label: "拒绝申请", value: 0 },
      ],
      Type: [
        { label: "情感", value: 1 },
        { label: "性格", value: 2 },
        { label: "健康", value: 3 },
        { label: "职场", value: 4 },
        { label: "人际", value: 5 },
        { label: "能力", value: 6 },
      ],
    };
  },
  methods: {
    //页面大小变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.refreshPage();
    },
    //当前页变化
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.refreshPage();
    },

    //格式化日期
    formattedDate(originalDate) {
      // 创建 Date 对象
      const date = new Date(originalDate);

      // 使用 Date 对象的方法获取年、月、日、小时、分钟和秒
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      const hours = ("0" + date.getHours()).slice(-2);
      const minutes = ("0" + date.getMinutes()).slice(-2);
      const seconds = ("0" + date.getSeconds()).slice(-2);

      // 将获取到的年月日时分秒拼接成指定格式的字符串
      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDate;
    },
    //处理ApplyList
    handleList(List) {
      // 使用 map 方法遍历用户列表并执行操作
      const modifiedList = List.map((item) => {
        // item.avatar =
        //   this.$store.getters.getIpAddr + "/" + item.avatar;
        // item.uploadtime = this.formattedDate(item.uploadtime);
        item.createdate = this.formattedDate(item.createdate);
        return item;
      });
      return modifiedList;
    },
    //根据条件获取列表
    getListByCondition() {
      this.$request.postHttp({
        url: "/evaluate/getEvaluationByCondition",
        data: this.param,
        success: (data) => {
          console.log(data);
          if (data.code == 200) {
            this.List = this.handleList(data.evaluateList);
          }
        },
        error: (error) => {},
      });
    },
    getCountByCondition() {
      this.$request.postHttp({
        url: "/evaluate/countEvaluationByCondition",
        data: this.param,
        success: (data) => {
          if (data.code == 200) {
            this.total = data.total;
          }
        },
        error: (error) => {},
      });
    },
    //刷新页面
    refreshPage() {
      // this.getArticleListByCondition();
      // this.getKnowledgeCount();
      this.getListByCondition();
      this.getCountByCondition();
    },

    //打开对话框
    openDialog(row) {
      this.row = row;
      console.log(row);
      this.dialogVisible = true;
    },
    //修改
    submit(row) {
      console.log(row);
      let param = {};
      param.evaluateid = row.evaluateid;
      param.title = row.title;
      param.type = row.type;
      param.brief = row.brief;

      this.$request.postHttp({
        url: "/evaluate/updateEvaluationById",
        data: param,
        success: (data) => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.dialogVisible = false;
            this.refreshPage();
          }
        },
        error: (error) => {},
      });
    },
    deleteConsultApplyById(row) {
      this.$request.postHttp({
        url: "/article/deleteConsultApplyById",
        params: {
          articleId: row.articleid,
        },
        success: (data) => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.refreshPage();
          }
        },
        error: (error) => {},
      });
    },
    handleImageString(imageStr) {
      if (imageStr === undefined || imageStr === null) {
        return [];
      }
      let strs = imageStr.split(";");
      console.log(strs);
      return strs;
    },
    typeName(type) {
      if (type == 1) return "情感";
      if (type == 2) return "性格";
      if (type == 3) return "健康";
      if (type == 4) return "职场";
      if (type == 5) return "人际";
      if (type == 6) return "能力";
    },
  },
};
</script>

<style scoped>
.my-flex {
  display: flex;
  align-items: center;
}
</style>